<template>
  <div class="topic-detail">
    <nav-bar title="专题"></nav-bar>
    <div class="topic-holder" v-html="topicData.content"></div>
    <div class="recommend-holder">
        <p class="title">专题推荐</p>
        <ul class="list">
            <li class="item" v-for="item in recommendList" :key="item.id">
                <img :src="item.scene_pic_url" alt="">
                <p>{{item.title}}</p>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
import { getTopicDetail } from "@/api/pages/topicdetail";
import NavBar from "@/components/common/nav-bar";
export default {
  data() {
    return {
      id: this.$route.query.id,
      topicData:{},
      recommendList:[],
    };
  },
  methods: {
    getData() {
      getTopicDetail({ id: this.id }).then((res) => {
        console.log(res);
        this.topicData = res.data;
        this.recommendList = res.recommendList;
      });
    },
  },
  created() {
      this.getData()
  },
  components: {
    "nav-bar": NavBar,
  },
};
</script>

<style lang="scss">
.topic-detail {
    .topic-holder{
        img{
            display: block;
        }
    }

    .recommend-holder{
        .title{
                padding: 30px 15px;
                text-align: center;
                font-size: 15px;
                color: #999;
            }
        .list{
            .item{
                padding: 12px;
                margin-bottom: 12px;
                width:100%;
                box-sizing: border-box;
                background-color: #fff;
                img{
                    display: block;
                    width: 100%;
                    height: 140px;
                }
                p{
                    margin: 15px 0;
                    font-size: 14px;
                }
            }
        }
    }
}
</style>